<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定内联样式</title>
  <style>
    .active {
      background-color: cornflowerblue;

    }

    .static.active {
      font-size: 10px;
    }

    .text-danger {
      background-color: crimson;
    }
  </style>
</head>

<body>
  <script src="./src/vue.js"></script>
  <!--对象语法/数组语法-->
  <div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">对象语法1</div>
    <div v-bind:style="styleObject">对象语法2</div>
    <div v-bind:style="[baseStyles, overridingStyles]">数组语法</div>
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">多重值</div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        activeColor: 'red',
        fontSize: 30,
        styleObject: {
          color: 'red',
          fontSize: '13px'
        },
        baseStyles: {
          color: 'red'
        },
        overridingStyles: {
          fontSize: '20px'
        }
      }
    })
  </script>

</body>

</html>